<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'
  import input from '../widget.form.input.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Pickbox',
        remark: '下拉选择表单',
        extends: [form, input],
        deprecate: 'validate-default',
        attrs: [
          {
            name: 'br',
            type: 'Boolean',
            remark: '是否换行',
            option: ''
          },
          {
            name: 'clearable',
            type: 'Boolean',
            remark: '是否可以清空',
            option: '',
          },
          {
            name: 'drop-props',
            type: 'Object',
            remark: '下拉选项对话框的属性。具体参数请参考Dialog组件',
          },
          {
            name: 'model-value / v-model',
            type: 'Object / Array',
            remark: '表单值。多个值可用数组。值的格式: <var>{value, text}</var>',
            option: '<var>value</var>: 值, <var>text</var>: 文本'
          },
          {
            name: 'multiple',
            type: 'Boolean',
            remark: '是否可多选',
            option: '',
            default: ''
          },
        ],
				examples: [{
				  remark: '树形下拉选择',
				  type: 'html',
				  view: true,
				  expanded: false,
				  code: `
					  <template>
					    <w-pickbox ref="box" name="pickbox" :label="{text: '选择地区'}" :model-value="pickVal" :clearable="true" @clear="clickClear">
					      <w-tree :current="pickVal && pickVal.value" :children="treeList">
					        <template #default="{item}">
					          <w-leaf :key="item.id" :text="item.text" :expanded="item.expanded" :children="item.children" @click="clickLeaf(item)"></w-leaf>
					        </template>
					      </w-tree>
					    </w-pickbox>
					  </template>
					  <${'script'}>
					    methods: {
					    	click(item) {
					    		this.focusLeafs = item.id
					    		this.$refs.box.val([{
					    			value: item.id,
					    			text: item.text
					    		}])
					    		this.$refs.box.closeDrop()
					    	}
					    }
					  </${'script'}>
					`,
					comp: {
						data() {
						  return {
						    focusLeafs: null,
								pickVal: null,
						    treeList: [{
						      id: '100',
						      text: '福建省',
						      expanded: true,
						      children: [{
						          id: '110',
						          text: '福州市',
											expanded: true,
						          children: [
												{id: '111', text: '鼓楼区'},
						            {id: '112', text: '晋安区'},
						          ]
						        },
						      ]
						    },{
						      id: '200',
						      text: '广东省',
						      expanded: true,
						      children: [{
						          id: '210',
						          text: '广州市',
											expanded: true,
						          children: [
												{id: '211', text: '天河区'},
						            {id: '212', text: '白云区'},
						          ]
						        },
						      ]
						    }]
						  }
						},
						methods: {
							clickLeaf(item) {
								this.pickVal = {value: item.id, text: item.text}
								this.$refs.box.closeDrop()
							},
							clickClear(e) {
								this.pickVal = null
							}
						}
					}
				}]
      }
    }
  }
</script>

<style>
</style>
